import EventCenter from "../../TFrame/script/helper/EventCenter";
import EventNames from "../EventNames";
import GameLogicController from "../game/GameLogicController";
import PlayerDataMgr from "../PlayerDataMgr";
import Util from "../../../StartAb/Util";
import ResManager from "../ResManager";
import Coordinates from "../Coordinates";
//@ts-ignore
const i18n = require('LanguageData');
const { ccclass, property } = cc._decorator;
/**
 * 第一步：提示点击不同
 * 第二步：使用提示
 * 第三步：告知找出5个不同
 */
@ccclass
export default class TutorialController extends cc.Component {

    @property(cc.Mask)
    maskComp: cc.Mask = null;

    @property(cc.Label)
    text: cc.Label = null;

    @property(cc.Node)
    blackBg: cc.Node = null;

    @property(cc.Node)
    arrowNode: cc.Node = null;

    @property(cc.Node)
    goButtonNode: cc.Node = null;

    currentHitArea: cc.Rect[] = [];
    graphics: cc.Graphics = null

    currentStep = 0;

    protected onLoad(): void {
        if (PlayerDataMgr.getInstance().turotial_played > 0)
            this.node.destroy();
        this.hideArrow();
    }

    start() {
        this.graphics = this.maskComp['_graphics'];
        this.graphics.fillColor = cc.color(255, 0, 0, 255);
        this.maskTouchEvent();
        this.step1();
    }

    maskTouchEvent() {
        this.node.on(cc.Node.EventType.TOUCH_END, (e: cc.Event.EventTouch) => {
            if (this.isHit(e)) {
                this.stepHandle();
            }
        }, this);
    }

    isHit(e: cc.Event.EventTouch) {
        let ptLocal = this.maskComp.node.convertToNodeSpaceAR(e.getLocation());
        for (let i = 0; i < this.currentHitArea.length; ++i) {
            if (this.currentHitArea[i].contains(ptLocal)) {
                console.log("TutorialController hit:" + i);
                return true;
            }
        }
        return false;
    }

    firstDiffIndex = 0;
    secondDiffIndex = 1;
    //指导点击不同
    step1() {
        this.currentStep = 1;
        this.resetMask();
        this.maskDigDiffNode(this.firstDiffIndex, cc.size(15, 15), true);
        this.text.string = i18n.t("tip_click_diff") || "";

        let ptWorld = this.getDiffNodePtWorld(this.firstDiffIndex);
        this.showArrowAt(this.arrowNode.parent.convertToNodeSpaceAR(ptWorld).add(cc.v2(-150, 0)))
    }
    //指导使用提示功能
    step2() {
        this.currentHitArea.length = 0;
        this.currentStep = 2;
        let hintButton = cc.Canvas.instance.node.getChildByName("bottomUI").getChildByName("hintButton");
        this.maskDigRectHole(hintButton, cc.size(15, 15), true);
        this.text.string = i18n.t("tip_use_tip") || "";
        this.showArrowAt(Util.getPostionOnSameParent(this.arrowNode, hintButton).add(cc.v2(-150, 0)))
    }
    //指导点击不同
    step3() {
        this.currentStep = 3;
        this.resetMask();
        this.maskDigDiffNode(this.firstDiffIndex, cc.size(15, 15), false);
        this.maskDigDiffNode(this.secondDiffIndex, cc.size(15, 15), true);
        let ptWorld = this.getDiffNodePtWorld(this.secondDiffIndex);
        this.showArrowAt(this.arrowNode.parent.convertToNodeSpaceAR(ptWorld).add(cc.v2(-150, 0)))
    }

    step4() {
        this.currentStep = 4;
        this.text.string = i18n.t("tip_try") || "";
        this.resetMask();
        this.goButtonNode.active = true;
    }

    endTutorial() {
        EventCenter.emit(EventNames.TutorialDone)
        PlayerDataMgr.getInstance().tutorialDone();
        this.node.destroy();
    }

    stepHandle() {
        if (this.currentStep == 1) {
            GameLogicController.getInstance().findDifference(this.firstDiffIndex, 2);
            this.wellDoneText();
            this.scheduleOnce(this.step2, 2);
            this.hideArrow();
        } else if (this.currentStep == 2) {
            GameLogicController.getInstance().hintClick();
            this.maskDigDiffNode(this.secondDiffIndex, cc.size(15, 15));
            this.step3();
        } else if (this.currentStep == 3) {
            GameLogicController.getInstance().findDifference(this.secondDiffIndex, 2);
            this.wellDoneText();
            this.scheduleOnce(this.step4, 2);
            this.hideArrow();
        }
    }

    resetMask() {
        this.graphics.clear();
    }

    getDiffNodePtWorld(diffIndex: number) {
        let bgResName = ResManager.getLevelResNameByIndex(ResManager.currentLevelIndex);
        let diffName = bgResName + "_" + diffIndex;
        let diffConfig = Coordinates.config[bgResName][diffName]
        let puzzleNode = cc.Canvas.instance.node.getChildByName("puzzle")
        let bottomDiffNode = puzzleNode.getChildByName("bottomMask").getChildByName("bottom")
        return bottomDiffNode.convertToWorldSpaceAR(cc.v2(diffConfig.x, diffConfig.y));
    }

    maskDigDiffNode(diffIndex: number, addSize: cc.Size, isAddToTouchArea = false) {
        let bgResName = ResManager.getLevelResNameByIndex(ResManager.currentLevelIndex);
        let diffName = bgResName + "_" + diffIndex;
        let diffConfig = Coordinates.config[bgResName][diffName]
        let puzzleNode = cc.Canvas.instance.node.getChildByName("puzzle")
        let topDiffNode = puzzleNode.getChildByName("topMask").getChildByName("top")
        let bottomDiffNode = puzzleNode.getChildByName("bottomMask").getChildByName("bottom")//.getChildByName(diffIndex.toString());
        let bottomDiffWorld = bottomDiffNode.convertToWorldSpaceAR(cc.v2(diffConfig.x, diffConfig.y));
        let rectWorld = cc.rect(bottomDiffWorld.x, bottomDiffWorld.y, diffConfig.w, diffConfig.h);
        rectWorld.center = cc.v2(bottomDiffWorld.x, bottomDiffWorld.y);
        this.maskRect(rectWorld, addSize, isAddToTouchArea)

        // this.maskDigRectHole(bottomDiffNode, addSize, isAddToTouchArea);
        //上面也要挖个孔
        let topDiffWorld = topDiffNode.convertToWorldSpaceAR(cc.v2(diffConfig.x, diffConfig.y));
        rectWorld = cc.rect(topDiffWorld.x, topDiffWorld.y, diffConfig.w, diffConfig.h);
        rectWorld.center = cc.v2(topDiffWorld.x, topDiffWorld.y);
        this.maskRect(rectWorld, addSize, isAddToTouchArea)
    }

    maskDigRectHole(holeNode: cc.Node, addSize: cc.Size, isAddToTouchArea = false) {
        let worldPt = holeNode.convertToWorldSpaceAR(cc.Vec2.ZERO);
        let localPt = this.maskComp.node.convertToNodeSpaceAR(worldPt);
        let x = localPt.x - holeNode.width * .5 - addSize.width * .5
        let y = localPt.y - holeNode.height * .5 - addSize.height * .5
        this.graphics.rect(x, y, holeNode.width + addSize.width, holeNode.height + addSize.height);
        this.graphics.fill();
        isAddToTouchArea && this.currentHitArea.push(cc.rect(x, y, holeNode.width + addSize.width, holeNode.height + addSize.height))
    }


    maskNodes(holeNodes: cc.Node[], addSizes: cc.Size[], isAddToTouchArea = false) {
        for (let i = 0; i < holeNodes.length; ++i) {
            let worldPt = holeNodes[i].convertToWorldSpaceAR(cc.Vec2.ZERO);
            let localPt = this.maskComp.node.convertToNodeSpaceAR(worldPt);
            let x = localPt.x - holeNodes[i].width * .5 - addSizes[i].width * .5
            let y = localPt.y - holeNodes[i].height * .5 - addSizes[i].height * .5
            this.graphics.rect(x, y, holeNodes[i].width + addSizes[i].width, holeNodes[i].height + addSizes[i].height);
            isAddToTouchArea && this.currentHitArea.push(cc.rect(x, y, holeNodes[i].width + addSizes[i].width, holeNodes[i].height + addSizes[i].height))
        }
        this.graphics.fill();
    }

    maskRect(rectWorld: cc.Rect, addSize: cc.Size, isAddToTouchArea = false) {
        let localPt = this.maskComp.node.convertToNodeSpaceAR(rectWorld.center);
        let x = localPt.x - rectWorld.width * .5 - addSize.width * .5
        let y = localPt.y - rectWorld.height * .5 - addSize.height * .5
        this.graphics.rect(x, y, rectWorld.width + addSize.width, rectWorld.height + addSize.height);
        this.graphics.fill();
        isAddToTouchArea && this.currentHitArea.push(cc.rect(x, y, rectWorld.width + addSize.width, rectWorld.height + addSize.height))
    }

    blinkText() {
    }

    wellDoneText() {
        this.text.string = i18n.t("didwell") || "";
    }

    hideArrow() {
        this.arrowNode.opacity = 0;
        cc.Tween.stopAllByTarget(this.arrowNode);
    }

    showArrowAt(ptLocal: cc.Vec2) {
        this.arrowNode.opacity = 255;
        this.arrowNode.setPosition(ptLocal)
        cc.tween(this.arrowNode)
            .repeatForever(cc.sequence(cc.moveBy(0.5, cc.v2(-15, 0)), cc.moveBy(0.5, cc.v2(15, 0))))
            .start();
        console.log("showArrowAt:" + ptLocal.toString())
    }
}
